<template>
  <div class="echartsBox">
    <div v-if="JSON.stringify(data) !== '{}'" id="eqStatusEcharts" class="allWidthHeight" />
    <div v-else class="kong">暂无数据</div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  props: {},
  data() {
    return {
      myChart: null,
      value1: '',
      rotation: 0,
      timeInterval: () => {},
      imageUrl: require('@/assets/images/pao.png'),
      data: {}
    }
  },
  watch: {},
  async mounted() {},
  methods: {
    infoSize() {
      this.myChart.resize()
    },
    /* 获取设备状态 */
    async getEquipStatus() {
      const res = await this.$axios.get('/board/internetData/equipWorkStatus')
      if (res?.data.code === 200) {
        this.data = res.data.data
        setTimeout(async () => {
          this.setEqStatusEcharts(res.data.data)
        }, 500)
      }
    },
    /* echarts */
    setEqStatusEcharts(obj) {
      const img2 = this.imageUrl
      const wordLength = (value) => {
        var ret = ''
        var maxLength = 4
        var valLength = value.length
        var rowN = Math.ceil(valLength / maxLength)
        if (rowN > 1) {
          for (var i = 0; i < rowN; i++) {
            var temp = ''
            var start = i * maxLength
            var end = start + maxLength
            temp = value.substring(start, end) + '\n'
            ret += temp
          }
          return ret
        } else {
          return value
        }
      }
      var data = [
        {
          name: '运行',
          value: obj.normalNum,
          color: '#91CC75',
          color1: '#b2f194',
          color2: '#000'
        },
        {
          name: '总数',
          value: obj.equipNum,
          color: '#00CBCE',
          color1: '#23ebee',
          color2: '#000'
        },
        {
          name: '点检',
          value: obj.pointNum,
          color: '#E05967',
          color1: '#f66e7c',
          color2: '#000'
        },
        {
          name: '维修',
          value: obj.repairNum,
          color: '#407FFE',
          color1: '#7fa9ff',
          color2: '#000'
        },
        {
          name: '保养',
          value: obj.maintainNum,
          color: '#F29961',
          color1: '#fab488',
          color2: '#000'
        }
      ]
      var offsetData = [
        [80, 53],
        [35, 73],
        [30, 33],
        [60, 33],
        [10, 48],
        [50, 68]
      ]
      var symbolSizeData = [100, 85, 75, 95, 75]
      var datas = []
      for (var i = 0; i < data.length; i++) {
        var item = data[i]
        datas.push({
          name: wordLength(item.name) + '\n' + item.value,
          // name: wordLength(item.name),
          value: offsetData[i],
          // value: item.value,
          symbolSize: symbolSizeData[i],
          label: {
            textStyle: {
              fontSize: 18,
              color: '#fff',
              align: 'center'
              // color: item.color2
            },
            formatter: function (params) {
              let font = params.name.split('\n')[0]
              let num = params.name.split('\n')[1]
              return [
                '{a|' + font + '}',
                '{b|' + num + '}台'
                // '{c|' + params.value[1] + '}'
              ].join('\n')
            },
            rich: {
              a: {
                fontSize: 16,
                color: '#fff', // 名称的颜色
                lineHeight: 20,
                align: 'center'
              },
              b: {
                fontSize: 20,
                color: '#fff', // X值的颜色
                lineHeight: 22,
                fontWeight: 'bold'
              }
            }
          },
          itemStyle: {
            color: new echarts.graphic.RadialGradient(0.3, 0.5, 0.7, [
              { offset: 0, color: item.color },
              { offset: 1, color: item.color1 }
            ]),
            opacity: 0.8,
            shadowColor: '#2e78eca8',
            shadowBlur: 10,
            shadowOffsetX: 1,
            shadowOffsetY: 1
          }
        })
      }
      const option = {
        grid: { show: false, top: 10, bottom: 10 },
        xAxis: [
          {
            gridIndex: 0,
            type: 'value',
            show: false,
            min: 0,
            max: 100,
            nameLocation: 'middle',
            nameGap: 5
          }
        ],
        yAxis: [
          {
            gridIndex: 0,
            min: 0,
            show: false,
            max: 100,
            nameLocation: 'middle',
            nameGap: 30
          }
        ],
        series: [
          {
            type: 'scatter',
            symbol: 'circle',
            symbolSize: 120,
            label: {
              show: true,
              formatter: '{b}',
              textStyle: {
                fontSize: '26'
              }
            },
            animationDurationUpdate: 1000,
            animationEasingUpdate: 1000,
            animationDelay: function (idx) {
              return 100
            },
            itemStyle: { color: '#00acea' },
            data: datas
          }
        ],
        graphic: [
          {
            type: 'image',
            id: 'logo',
            left: '45%',
            bottom: '30%',
            z: -10,
            bounding: 'raw',
            origin: [675, 5],
            style: { image: img2, width: 120, height: 120, opacity: 0.4 }
          },
          {
            type: 'image',
            id: 'logo1',
            right: '14%',
            bottom: '0',
            z: -10,
            bounding: 'raw',
            origin: [275, 5],
            style: { image: img2, width: 80, height: 80, opacity: 0.4 }
          },
          {
            type: 'image',
            id: 'logo2',
            left: '10%',
            bottom: '2%',
            z: -10,
            bounding: 'raw',
            origin: [875, 15],
            style: { image: img2, width: 60, height: 60, opacity: 0.4 }
          },
          {
            type: 'image',
            id: 'logo3',
            left: '36%',
            bottom: 0,
            z: -10,
            bounding: 'raw',
            origin: [975, 5],
            style: { image: img2, width: 40, height: 40, opacity: 0.4 }
          },
          {
            type: 'image',
            id: 'logo4',
            left: '32%',
            bottom: '10%',
            z: -10,
            bounding: 'raw',
            origin: [76, 76],
            style: { image: img2, width: 50, height: 50, opacity: 0.4 }
          },
          {
            type: 'image',
            id: 'logo5',
            left: '40%',
            bottom: '35%',
            z: -10,
            bounding: 'raw',
            origin: [76, 76],
            style: { image: img2, width: 90, height: 90, opacity: 0.4 }
          },
          {
            type: 'image',
            id: 'logo6',
            left: '70%',
            bottom: '65%',
            z: -10,
            bounding: 'raw',
            origin: [100, 100],
            style: { image: img2, width: 100, height: 100, opacity: 0.4 }
          }
        ]
      }
      if (
        this.myChart != null &&
        this.myChart !== '' &&
        this.myChart !== undefined
      ) {
        this.myChart.dispose() // 销毁
      }
      this.myChart = echarts.init(document.getElementById('eqStatusEcharts'))
      this.myChart.clear()
      this.myChart.setOption(option, true)
    }
  }
}
</script>
<style lang='scss' scoped>
.echartsBox {
  width: 100%;
  padding: 0 15px;
  height: calc(100% - 65px);
}
.kong {
  background-size: 50% auto;
}
</style>
